import React, { useState } from 'react';
import { Button, Select, Input, Table, DatePicker, Checkbox, Radio, Tooltip, Upload, message, Modal } from 'antd';
import { 
  PlusOutlined, 
  ImportOutlined, 
  ScanOutlined, 
  SaveOutlined, 
  ReloadOutlined,
  HistoryOutlined,
  SettingOutlined,
  UploadOutlined,
  DeleteOutlined,
  MinusCircleOutlined
} from '@ant-design/icons';
import SelectProductModal from './SelectProductModal';
import ImportProductModal from './ImportProductModal';
import AddProductModal from './AddProductModal';
import ColumnSettingModal, { ColumnConfig } from './ColumnSettingModal';
import type { ColumnsType } from 'antd/es/table';
import { Resizable } from 'react-resizable';
import { DndProvider, useDrag, useDrop } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import update from 'immutability-helper';
import 'react-resizable/css/styles.css';
import './styles.scss';

const { Option } = Select;

interface ProductInfo {
  key: string;
  productId?: string;
  productName?: string;
  image?: string;
  specModel?: string;
  barcode?: string;
  unit?: string;
  currentStock?: number;
  quantity: number;
  price: number;
  amount?: number;
  remark?: string;
  isEmpty?: boolean;
}

// 可拖拽的表头单元格
const DraggableHeaderCell: React.FC<any> = ({ index, moveColumn, children, ...restProps }) => {
  const ref = React.useRef<HTMLTableHeaderCellElement>(null);
  
  const [{ isOver }, drop] = useDrop({
    accept: 'column',
    collect: monitor => ({
      isOver: monitor.isOver(),
    }),
    drop: (item: { index: number }) => {
      if (item.index !== index) {
        moveColumn(item.index, index);
      }
    },
  });

  const [{ isDragging }, drag] = useDrag({
    type: 'column',
    item: { index },
    collect: monitor => ({
      isDragging: monitor.isDragging(),
    }),
  });

  drag(drop(ref));

  return (
    <th
      ref={ref}
      {...restProps}
      style={{ opacity: isDragging ? 0.5 : 1, cursor: 'move', background: isOver ? '#fafafa' : undefined }}
    >
      {children}
    </th>
  );
};

// 完全重写ResizableTitle组件，彻底分离调整宽度和拖拽功能
const ResizableTitle: React.FC<any> = props => {
  const { onResize, width, moveColumn, index, ...restProps } = props;
  const [isResizing, setIsResizing] = useState(false);

  // 创建单独的引用，不共享拖拽的引用
  const ref = React.useRef<HTMLTableHeaderCellElement>(null);

  if (!width) {
    return <DraggableHeaderCell index={index} moveColumn={moveColumn} {...restProps} />;
  }

  // 创建单独的非拖拽th元素
  const renderTh = () => (
    <th
      ref={ref}
      {...restProps}
      style={{ 
        width: width,
        cursor: isResizing ? 'col-resize' : 'default', 
      }}
    >
      {restProps.children}
    </th>
  );

  return (
    <Resizable
      width={width}
      height={0}
      minConstraints={[60, 0]}
      maxConstraints={[1000, 0]}
      handle={
        <span
          className="react-resizable-handle"
          onClick={e => {
            e.stopPropagation();
            e.preventDefault();
          }}
          onMouseDown={e => {
            // 彻底阻止事件
            e.stopPropagation();
            e.preventDefault();
            setIsResizing(true);
            
            // 添加全局事件监听，确保释放鼠标时重置状态
            const handleMouseUp = () => {
              setIsResizing(false);
              document.removeEventListener('mouseup', handleMouseUp);
            };
            document.addEventListener('mouseup', handleMouseUp);
          }}
        />
      }
      draggableOpts={{ enableUserSelectHack: false }}
      onResize={onResize}
      onResizeStart={e => {
        e.stopPropagation();
        e.preventDefault();
      }}
      onResizeStop={e => {
        e.stopPropagation();
        e.preventDefault();
        setIsResizing(false);
      }}
    >
      {isResizing ? renderTh() : <DraggableHeaderCell index={index} moveColumn={moveColumn} {...restProps} />}
    </Resizable>
  );
};

const SalesOrder: React.FC = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [isImportModalVisible, setIsImportModalVisible] = useState(false);
  const [isColumnSettingVisible, setIsColumnSettingVisible] = useState(false);
  const [isAddProductModalVisible, setIsAddProductModalVisible] = useState(false);
  const [fileList, setFileList] = useState<any[]>([]);
  const [products, setProducts] = useState<ProductInfo[]>([
    { key: '1', quantity: 0, price: 0 },
    { key: '2', quantity: 0, price: 0 },
    { key: '3', quantity: 0, price: 0 },
    { key: '4', quantity: 0, price: 0 },
    { key: '5', quantity: 0, price: 0 },
    { key: '6', quantity: 0, price: 0 },
    { key: '7', quantity: 0, price: 0 },
    { key: '8', quantity: 0, price: 0 },
  ]);
  const [selectedCustomer, setSelectedCustomer] = useState<string>();
  const [selectedWarehouse, setSelectedWarehouse] = useState<string>();
  const [columnConfigs, setColumnConfigs] = useState<ColumnConfig[]>([
    { key: 'actions', title: '操作', visible: true },
    { key: 'image', title: '图片', visible: true },
    { key: 'name', title: '商品信息', visible: true },
    { key: 'specModel', title: '规格型号', visible: true },
    { key: 'barcode', title: '条码编号', visible: true },
    { key: 'unit', title: '单位', visible: true },
    { key: 'currentStock', title: '当前库存', visible: true },
    { key: 'quantity', title: '数量', visible: true },
    { key: 'price', title: '单价（元）', visible: true },
    { key: 'amount', title: '金额（元）', visible: true },
    { key: 'remark', title: '备注信息', visible: true },
  ]);

  // 添加空白行数据
  const emptyRows = Array(7).fill(null).map((_, index) => ({
    key: `empty-${index}`,
    productId: undefined,
    productName: '',
    image: '',
    specModel: '',
    barcode: '',
    unit: '',
    currentStock: 0,
    quantity: 0,
    price: 0,
    amount: 0,
    remark: '',
    isEmpty: true
  }));

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleModalCancel = () => {
    setIsModalVisible(false);
  };

  const handleModalOk = (selectedProducts: any[]) => {
    const newProducts = selectedProducts.map(product => ({
      key: product.key,
      productId: product.id,
      productName: product.name,
      image: product.image,
      specModel: product.specModel,
      barcode: product.barcode,
      unit: product.unit,
      currentStock: product.stock,
      quantity: product.quantity || 0,
      price: product.salePrice || 0,
      amount: (product.quantity || 0) * (product.salePrice || 0),
      remark: '',
      isEmpty: false
    }));

    // 保留未使用的空白行
    const unusedEmptyRows = emptyRows.slice(newProducts.length);
    setProducts([...newProducts, ...unusedEmptyRows]);
    setIsModalVisible(false);
  };

  const handleDeleteRow = (key: string) => {
    const newProducts = products.filter(item => item.key !== key);
    // 补充空白行
    const currentEmptyRows = emptyRows.slice(0, 7 - newProducts.length);
    setProducts([...newProducts, ...currentEmptyRows]);
  };

  const showImportModal = () => {
    setIsImportModalVisible(true);
  };

  const handleImportModalCancel = () => {
    setIsImportModalVisible(false);
  };

  const handleImportModalOk = (importedProducts: any[]) => {
    // 处理导入的商品数据
    const newProducts = importedProducts.map(product => ({
      key: product.key || String(Math.random()),
      name: product.name,
      quantity: product.quantity || 0,
      unit: product.unit,
      specModel: product.specModel,
      price: product.price || 0,
      amount: (product.quantity || 0) * (product.price || 0),
      remark: product.remark || '',
      isEmpty: false
    }));

    // 保留未使用的空白行
    const unusedEmptyRows = emptyRows.slice(newProducts.length);
    setProducts([...newProducts, ...unusedEmptyRows]);
    setIsImportModalVisible(false);
  };

  const showColumnSetting = () => {
    setIsColumnSettingVisible(true);
  };

  const handleColumnSettingCancel = () => {
    setIsColumnSettingVisible(false);
  };

  const handleColumnSettingOk = (newColumnConfigs: ColumnConfig[]) => {
    setColumnConfigs(newColumnConfigs);
    setIsColumnSettingVisible(false);
  };

  const getVisibleColumns = () => {
    const columnMap = new Map(columns.map(col => [col.key, col]));
    return columnConfigs
      .filter(config => config.visible)
      .map(config => columnMap.get(config.key))
      .filter((col): col is typeof columns[0] => col !== undefined);
  };

  const getOrderFormColumns = () => {
    return columns.map((col, index) => ({
      ...col,
      onHeaderCell: (column: any) => ({
        width: column.width || 100,
        onResize: handleResize(index),
        moveColumn: moveColumn,
        index,
        isResizable: true,
      }),
      width: col.width || 100,
    }));
  };

  const [columns, setColumns] = useState<ColumnsType<ProductInfo>>([
    {
      title: '操作',
      dataIndex: 'actions',
      width: 80,
      fixed: 'left',
      render: (_, record) => (
        <div className="row-actions">
          {record.productId ? (
            <Button
              type="link"
              className="delete-btn"
              icon={<DeleteOutlined style={{ color: '#ff4d4f' }} />}
              onClick={() => handleDeleteRow(record.key)}
            />
          ) : (
            <>
              <Button
                type="link"
                className="add-btn"
                icon={<PlusOutlined style={{ color: '#52c41a' }} />}
                onClick={() => addEmptyRow()}
              />
              <Button
                type="link"
                className="delete-btn"
                icon={<DeleteOutlined style={{ color: '#ff4d4f' }} />}
                onClick={() => handleDeleteRow(record.key)}
              />
            </>
          )}
        </div>
      ),
    },
    {
      title: '图片',
      dataIndex: 'image',
      width: 80,
      render: (value) => value ? <img src={value} alt="商品图片" style={{ width: 50, height: 50 }} /> : null,
    },
    {
      title: '商品信息',
      dataIndex: 'productName',
      width: 200,
      render: (value, record) => (
        <div 
          className={`product-name ${!record.productId ? 'empty-cell' : ''}`}
          onClick={() => !record.productId && showModal()}
        >
          {value}
        </div>
      ),
    },
    {
      title: '规格型号',
      dataIndex: 'specModel',
      width: 120,
      render: (value, record) => (
        <Input
          value={record.specModel || ''}
          onChange={e => handleSpecModelChange(record.key, e.target.value)}
          onBlur={e => e.stopPropagation()}
          onClick={e => e.stopPropagation()}
        />
      ),
    },
    {
      title: '条码编号',
      dataIndex: 'barcode',
      width: 120,
      render: (value, record) => (
        <Input
          value={record.barcode || ''}
          onChange={e => handleBarcodeChange(record.key, e.target.value)}
          onBlur={e => e.stopPropagation()}
          onClick={e => e.stopPropagation()}
        />
      ),
    },
    {
      title: '单位',
      dataIndex: 'unit',
      width: 80,
      render: (value, record) => (
        <Input
          value={record.unit || ''}
          onChange={e => handleUnitChange(record.key, e.target.value)}
          onBlur={e => e.stopPropagation()}
          onClick={e => e.stopPropagation()}
        />
      ),
    },
    {
      title: '当前库存',
      dataIndex: 'currentStock',
      width: 100,
      render: (value, record) => (
        <Input
          value={record.currentStock || ''}
          onChange={e => handleCurrentStockChange(record.key, e.target.value)}
          type="number"
          onBlur={e => e.stopPropagation()}
          onClick={e => e.stopPropagation()}
        />
      ),
    },
    {
      title: '数量',
      dataIndex: 'quantity',
      width: 100,
      render: (value, record) => (
        <Input
          value={record.quantity || ''}
          onChange={e => handleQuantityChange(record.key, e.target.value)}
          type="number"
          onBlur={e => e.stopPropagation()}
          onClick={e => e.stopPropagation()}
        />
      ),
    },
    {
      title: '单价(元)',
      dataIndex: 'price',
      width: 100,
      render: (value, record) => (
        <Input
          value={record.price || ''}
          onChange={e => handlePriceChange(record.key, e.target.value)}
          type="number"
          onBlur={e => e.stopPropagation()}
          onClick={e => e.stopPropagation()}
        />
      ),
    },
    {
      title: '金额(元)',
      dataIndex: 'amount',
      width: 100,
      className: 'amount-cell',
      render: (_, record) => {
        // 计算金额：数量 * 单价
        const amount = (record.quantity || 0) * (record.price || 0);
        return formatAmount(amount);
      },
    },
    {
      title: '备注信息',
      dataIndex: 'remark',
      width: 200,
      render: (value, record) => (
        <Input
          value={record.remark || ''}
          onChange={e => handleRemarkChange(record.key, e.target.value)}
          onBlur={e => e.stopPropagation()}
          onClick={e => e.stopPropagation()}
        />
      ),
    },
  ]);

  // 处理列宽度调整
  const handleResize = (index: number) => (e: any, { size }: any) => {
    // 创建新的列数组，避免直接修改原数组
    const nextColumns = [...columns];
    
    // 确保宽度不会小于60px
    const newWidth = Math.max(size.width, 60);
    
    // 修改对应列的宽度
    nextColumns[index] = {
      ...nextColumns[index],
      width: newWidth,
    };
    
    // 更新列配置
    setColumns(nextColumns);
  };

  // 处理列拖拽
  const moveColumn = (dragIndex: number, hoverIndex: number) => {
    const dragColumn = columns[dragIndex];
    setColumns(
      update(columns, {
        $splice: [
          [dragIndex, 1],
          [hoverIndex, 0, dragColumn],
        ],
      }),
    );
  };

  // 获取可调整宽度和可拖拽的列配置
  const getResizableColumns = () => {
    return columns.map((col, index) => ({
      ...col,
      onHeaderCell: (column: any) => ({
        width: column.width || 100,
        onResize: handleResize(index),
        moveColumn: moveColumn,
        index,
        isResizable: true,
      }),
      width: col.width || 100,
    }));
  };

  const handleQuantityChange = (key: string, value: string) => {
    setProducts(prevProducts => prevProducts.map(item => {
      if (item.key === key) {
        const quantity = value === '' ? 0 : Number(value);
        const amount = quantity * (item.price || 0); // 计算新的金额
        return {
          ...item,
          quantity,
          amount // 更新金额
        };
      }
      return item;
    }));
  };

  const handlePriceChange = (key: string, value: string) => {
    setProducts(prevProducts => prevProducts.map(item => {
      if (item.key === key) {
        const price = value === '' ? 0 : Number(value);
        const amount = price * (item.quantity || 0); // 计算新的金额
        return {
          ...item,
          price,
          amount // 更新金额
        };
      }
      return item;
    }));
  };

  const handleRemarkChange = (key: string, value: string) => {
    setProducts(prevProducts => prevProducts.map(item => {
      if (item.key === key) {
        return { ...item, remark: value };
      }
      return item;
    }));
  };

  const formatAmount = (amount: number) => {
    return amount.toFixed(2);
  };

  // 初始化空白行
  React.useEffect(() => {
    if (products.length === 0) {
      setProducts(emptyRows);
    }
  }, []);

  // 处理文件上传前的验证
  const beforeUpload = (file: any) => {
    const isJpgOrPngOrGif = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
    if (!isJpgOrPngOrGif) {
      message.error('只能上传JPG/PNG/GIF格式的图片！');
      return false;
    }
    const isLt5M = file.size / 1024 / 1024 < 5;
    if (!isLt5M) {
      message.error('图片大小不能超过5MB！');
      return false;
    }
    return true;
  };

  // 处理文件上传变化
  const handleUploadChange = (info: any) => {
    let newFileList = [...info.fileList];
    
    // 最多只允许上传5个文件
    newFileList = newFileList.slice(-5);
    
    // 更新文件状态
    newFileList = newFileList.map(file => {
      if (file.response) {
        file.url = file.response.url;
      }
      return file;
    });
    
    setFileList(newFileList);
    
    // 处理上传状态提示
    if (info.file.status === 'done') {
      message.success(`${info.file.name} 上传成功`);
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} 上传失败`);
    }
  };

  const showAddProductModal = () => {
    setIsAddProductModalVisible(true);
  };

  const handleAddProductModalCancel = () => {
    setIsAddProductModalVisible(false);
  };

  const handleAddProductModalOk = (productData: any) => {
    // 创建新商品
    const newProduct: ProductInfo = {
      key: String(Date.now()),
      productId: String(Date.now()),
      productName: productData.productName,
      image: '',
      specModel: productData.specModel,
      barcode: productData.barcode,
      unit: productData.unit,
      currentStock: 0,
      quantity: 1,
      price: Number(productData.wholesalePrice) || 0,
      amount: Number(productData.wholesalePrice) || 0,
      remark: productData.remark,
      isEmpty: false
    };

    // 将新商品添加到表格
    const newProducts = [...products.filter(p => p.productId), newProduct];
    const remainingEmptyRows = emptyRows.slice(0, Math.max(0, 7 - newProducts.length));
    setProducts([...newProducts, ...remainingEmptyRows]);
    
    setIsAddProductModalVisible(false);
    message.success('商品添加成功');
  };

  const addEmptyRow = () => {
    // 创建一个新的空白行
    const newEmptyRow = {
      key: `empty-${Date.now()}`, // 使用时间戳确保key唯一
      productId: undefined,
      productName: '',
      image: '',
      specModel: '',
      barcode: '',
      unit: '',
      currentStock: 0,
      quantity: 0,
      price: 0,
      amount: 0,
      remark: '',
      isEmpty: true
    };

    // 保留所有现有行，并在末尾添加新空白行
    setProducts(prevProducts => [...prevProducts, newEmptyRow]);
  };

  // 修改所有字段的处理函数
  const handleSpecModelChange = (key: string, value: string) => {
    setProducts(prevProducts => prevProducts.map(item => {
      if (item.key === key) {
        return {
          ...item,  // 保留所有现有数据
          specModel: value
        };
      }
      return item;
    }));
  };

  const handleBarcodeChange = (key: string, value: string) => {
    setProducts(prevProducts => prevProducts.map(item => {
      if (item.key === key) {
        return {
          ...item,  // 保留所有现有数据
          barcode: value
        };
      }
      return item;
    }));
  };

  const handleUnitChange = (key: string, value: string) => {
    setProducts(prevProducts => prevProducts.map(item => {
      if (item.key === key) {
        return {
          ...item,  // 保留所有现有数据
          unit: value
        };
      }
      return item;
    }));
  };

  const handleCurrentStockChange = (key: string, value: string) => {
    setProducts(prevProducts => prevProducts.map(item => {
      if (item.key === key) {
        return {
          ...item,  // 保留所有现有数据
          currentStock: Number(value)
        };
      }
      return item;
    }));
  };

  return (
    <div className="sales-order">
      <div className="page-header">
        <div className="page-title">销售预定单</div>
        <div className="expiry-date">到期日期：2025-03-15</div>
      </div>
      {/* 顶部按钮区 */}
      <div className="action-bar">
        <div className="left-actions">
          <Button 
            type="primary" 
            icon={<PlusOutlined />}
            onClick={showModal}
          >
            选择商品
          </Button>
          <Button 
            icon={<ImportOutlined />}
            onClick={showImportModal}
          >
            导入商品
          </Button>
          <Button icon={<ScanOutlined />}>扫码录入</Button>
          <Button icon={<SaveOutlined />}>保存</Button>
          <Button icon={<ReloadOutlined />}>刷新</Button>
          <Button icon={<HistoryOutlined />}>历史单据</Button>
          <Tooltip title="设置表格显示列">
            <Button 
              icon={<SettingOutlined />}
              onClick={showColumnSetting}
            >
              设置
            </Button>
          </Tooltip>
        </div>
        <div className="right-actions">
          <div className="price-type">
            销售价格：
            <Radio.Group defaultValue="batch">
              <Radio value="batch">批发价</Radio>
              <Radio value="retail">零售价</Radio>
            </Radio.Group>
          </div>
        </div>
      </div>

      {/* 订单信息区 */}
      <div className="order-info">
        <div className="info-row">
          <div className="info-item required">
            <label>客户：</label>
            <Select
              placeholder="请选择客户"
              style={{ width: 200 }}
              showSearch
              value={selectedCustomer}
              onChange={setSelectedCustomer}
            >
              <Option value="customer1">神州仓库</Option>
            </Select>
            <Button type="link" className="quick-add">快速添加</Button>
          </div>
          <div className="info-item required">
            <label>仓库：</label>
            <Select
              placeholder="请选择仓库"
              style={{ width: 200 }}
              showSearch
              value={selectedWarehouse}
              onChange={setSelectedWarehouse}
            >
              <Option value="warehouse1">神州仓库</Option>
            </Select>
          </div>
          <div className="info-item">
            <label>单据日期：</label>
            <DatePicker style={{ width: 200 }} />
          </div>
          <div className="info-item">
            <label>单据编号：</label>
            <Input style={{ width: 200 }} disabled />
          </div>
        </div>
      </div>

      {/* 商品表格 */}
      <div className="product-table">
        <DndProvider backend={HTML5Backend}>
          <Table
            dataSource={products}
            columns={getOrderFormColumns()}
            pagination={false}
            components={{
              header: {
                cell: ResizableTitle,
              },
            }}
            scroll={{ x: 'max-content' }}
            className="product-data-table"
            bordered
          />
        </DndProvider>
      </div>

      {/* 底部信息 */}
      <div className="order-footer">
        <div className="left-info">
          <div className="info-item">
            <label>业务员：</label>
            <Select style={{ width: 150 }} placeholder="请选择">
              <Option value="sales1">某某</Option>
            </Select>
          </div>
          <div className="info-item">
            <label>制单人：</label>
            <Select style={{ width: 150 }} defaultValue="current">
              <Option value="current">某某</Option>
            </Select>
          </div>
          <div className="info-item">
            <label>备注信息：</label>
            <Input.TextArea style={{ width: 300 }} rows={1} placeholder="请输入备注信息" />
          </div>
          <div className="info-item">
            <Checkbox>保存后打印</Checkbox>
          </div>
        </div>
        <div className="right-info">
          <div className="discount-row">
            <label>折扣率(%)：</label>
            <Input style={{ width: 100 }} defaultValue="100" />
            <label>折后金额：</label>
            <Input style={{ width: 100 }} disabled />
          </div>
          <div className="amount-row">
            <label>其他费用：</label>
            <Input style={{ width: 100 }} defaultValue="0" />
            <label>结算账户：</label>
            <Select style={{ width: 150 }} defaultValue="cash">
              <Option value="cash">银行卡</Option>
            </Select>
          </div>
          <div className="total-row">
            <div className="amount-info">
              <label>本单应追：</label>
              <span className="amount">0</span>
            </div>
            <div className="amount-info">
              <label>本次追款：</label>
              <Input style={{ width: 100 }} defaultValue="0" />
              <Button type="link" className="calc-amount">请输入本次追款金额</Button>
            </div>
            <div className="amount-info">
              <label>定金：</label>
              <Input style={{ width: 100 }} defaultValue="0" />
              <span className="total-amount">总计金额：¥0.00</span>
            </div>
          </div>
        </div>
      </div>

      {/* 附件上传区域 */}
      <div className="attachment-upload">
        <div className="upload-wrapper">
          <Upload
            name="file"
            listType="picture-card"
            fileList={fileList}
            beforeUpload={beforeUpload}
            onChange={handleUploadChange}
            action="/api/upload"  // 替换为实际的上传接口
            multiple
          >
            {fileList.length >= 5 ? null : (
              <div className="upload-button">
                <PlusOutlined />
                <div className="upload-text">上传附件</div>
              </div>
            )}
          </Upload>
          <div className="upload-tip">
            支持jpg、png、gif格式图片，最多上传5个
          </div>
        </div>
      </div>

      {/* 选择商品弹窗 */}
      <SelectProductModal
        visible={isModalVisible}
        onCancel={handleModalCancel}
        onOk={handleModalOk}
      />

      {/* 导入商品弹窗 */}
      <ImportProductModal
        visible={isImportModalVisible}
        onCancel={handleImportModalCancel}
        onOk={handleImportModalOk}
      />

      {/* 列设置弹窗 */}
      <ColumnSettingModal
        visible={isColumnSettingVisible}
        onCancel={handleColumnSettingCancel}
        onOk={handleColumnSettingOk}
        columnConfigs={columnConfigs}
      />

      {/* 添加商品弹窗 */}
      <AddProductModal
        visible={isAddProductModalVisible}
        onCancel={handleAddProductModalCancel}
        onOk={handleAddProductModalOk}
      />
    </div>
  );
};

export default SalesOrder; 